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El proceso de diseño 


Diseño 

—  Iteración: Prototipado y Evaluación 
. Técnicas de prototipado 
+ Técnicas de evaluación 


Definir tareas: 

Análisis de tareas: 

HTA: Análisis jerárquico de tareas 
Diálogos: 

—Diagramas de secuencias 


Definir estilo 
. Guías 
$ Estándares 
. Reglas 
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Análisis de tareas 


+ Una de las premisas de cualquier aproximación 
con la que abordemos el diseño es: conocer al 
usuario y cómo realiza las diferentes tareas. 


e Tarea: Unidad significativa de trabajo en la 
actividad de una persona (sobre una aplicación). 


El primer paso en el diseño de un sistema 
interactivo es el análisis de las tareas que el 
usuario debe realizar. 


— Esta información se recoge con una notación que 
permita su formalización y estudio. 
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Análisis de tareas 


* La descripción de las tareas se suele utilizar 
para “imaginar” nuevos sistemas o dispositivos. 


e El análisis de las tareas se utiliza para investigar 
una situación existente. 


— En el análisis de tareas hay que determinar: 
e Información que necesita el usuario para realizar una tarea 
(qué hacer). 
e Terminología y símbolos del dominio del problema 
(elementos). 
e Descripción de cómo se realizan esas tareas actualmente 
(cómo). 
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Análisis de tareas 


e Existen diferentes técnicas: 
— GOMS 


e Familia de técnicas propuesta para modelar y describir las 
prestaciones de las tareas desde el punto de vista humano. 

e GOMS es acrónimo de: Objetivos (Goals), Operadores 
(Operators), Métodos (Methods) y Reglas de selección 
(Selection Rules). 


— Modelo entidad-relación 


+ Considera las entidades no computacionales (como objetos 
físicos) y las acciones realizadas con ellos. Esta técnica se 
asocia normalmente con diseño de bases de datos y 
programación orientada a objetos. 


— Análisis Jerárquico de Tareas (HTA) 
+ Esla técnica más popular. Se estudiará en detalle. 
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Análisis jerárquico de tareas (HTA) 


e Incluye dividir una tarea en tareas más simples, de forma 
recursiva. Estas se agrupan como planes que especifican 
cómo se deben llevar a cabo esas tareas en la práctica. 


HTA se focaliza en las acciones observables y físicas, e 
incluye acciones no relacionados con el software o un 
dispositivo de interacción. 


e Proceso: 

e Comenzar con un objetivo de usuario que se examina de forma que 
se puedan identificar las tareas principales que hay que realizar para 
lograrlo. 

Las tareas se subdividen en subtareas: el proceso puede proseguir 
mediante refinamientos progresivos hasta llegar al grado de 
granularidad requerido. 
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Análisis jerárquico de tareas 


e Notación Acciones... 


sequence selection 
O O 


iteration unit task 
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Análisis jerárquico de tareas 


... + planes 


hacer 1 
Si es día lectivo 
entonces hacer 4-5-6-7 
si no 

hacer 10 

repetir 11 
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Análisis jerárquico de tareas 


*. Ejemplo: Comprar un DVD 


. In order to buy a DVD 

. locate DVD 

. add DVD to shopping basket 
. enter payment details 

. complete address 

. confirm order 


plan 0: If regular user do 1-2-5. 
If new user do 1-2-3-4-5. 
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Análisis jerárquico de tareas 


* Ejemplo (descripción gráfica): 


plan 0: 
if regular user do 1-2-5. 
if new user do 1-2-3-4-5. 


locate add DVD to enter payment complete confirm 
shopping a details 3 address i order 5 
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Diálogos 


+ El diálogo es el proceso de comunicación entre 
dos o más participantes. 


+ En el diseño de interfaces de usuario, el diálogo 
representa la estructura de la conversación 
entre el usuario y la computadora, a través de 
una aplicación o sistema concreto. 
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Diálogos 


Existen diferentes métodos de representación 
de diálogos: 

— Diagramas de transición 

— Gramática 

— User Action Notation 

— Diagramas de secuencias (UML) 
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Diálogos 


+ Diagramas de transición 


— Se expresan los posibles estados del sistema (nodos) 
así como las transiciones entre ellos (enlaces) 


Amend 


details 
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Diálogos 


e Gramáticas 


— Representación basada en reglas que permiten 
especificar condiciones y las acciones necesarias para 
realizar una orden. 


<agenda> ::= <Persona> <Telefono> 

<Persona> := <Nombre> <Apellido> <Apellido> 
<Nombre> ::= <string> 

<Apellido> ::= <string> 

<string> ::= <caracter> | <caracter> <string> 

<telefono> ::= [ (* Prefijo 9” ] <Numero> 

<Numero> ::= <digit> <digit> ‘~’ <digit> <digit>-" <digit> <digit> 
<caracter> ::=A|B]...]Z 

<digito> ::=0/|1/|2|3/|4|5|6/|7|8]|9 
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Diálogos 


User Action Notation (UAN) 


— Lenguaje para descripción de las tareas del usuario. 
Se utiliza una tabla dividida en 3 columnas: acciones 
de usuario, realimentación y estado de la interfaz. 


UAN Feedback Estado Interface 
—Tfile] Mv File!, forall(file!): file-! Selected = file 
-[x,y]* Outline(file) > ~ 
—[trash] Outline(file) > ~ Trash! 


M^ Delete(file), trash!! Selected= null 
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Diálogos 
e Diagramas de secuencias (UML) 


e Describen el comportamiento dinámico entre actores u 
objetos y el sistema. 


e Muestra la secuencia cronológica de mensajes entre 
objetos durante un escenario concreto. 
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Diálogos 


e Diagramas de secuencias (UML) 


e En IPO: 


e Permiten esquematizar los diagramas detallados de 
casos de uso, en términos próximos al usuario. 


e Permiten realizar una representación precisa de las 
interacciones entre los objetos: 
— Describen interacciones, objetos y sus relaciones. 
— Describen los mensajes que intercambian. 
— Ordenan temporalmente los mensajes. 
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Diálogos 
e Diagramas de secuencias (UML) 


e Se usan en el análisis de requisitos: 
— Para refinar descripciones de casos de uso 
— Para encontrar objetos adicionales 


e Se usan en la fase de diseño del sistema (este es el 
contexto en el que usaremos los diagramas de 
secuencias en IPO): 

— Para refinar interfaces 
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Diálogos 


Diagramas de secuencias (UML) 


Elementos del diagrama simplificado 


— Cada objeto viene dado por una barra vertical: los elementos 
implicados se expresan en columnas: 
e Actor que inicia el caso de uso (primera columna izquierda) 
+ Interfaz (columna o columnas intermedias) 
+ Sistema (columna de la derecha) 
— El tiempo transcurre de arriba abajo: los mensajes entre 
columnas se representan en orden temporal en horizontal. 
e Los flujos alternativos se representan con cajas alt 
e Los flujos iterativos se representan con cajas loop 
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Diálogos 


¡ | 
Diagrama de secuencia 

$ x ActivarPartalla 
Ejemplo: Registrarse pra 


SolicirarRegistro PIA) 


IngresarPIMPIN) P| urnem a) 
Caso de uso: 


TOPEL OBA [Si PIW comento] 


n 


) 
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Diálogos 


Diagrama de secuencia 
Ejemplo: Ingresar PIN 


http://www.websequencediagrams.com 
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Diálogos 


e Diagrama de secuencia 
A PA 


: Encargado 


: Libro | : Ficha socio : Ficha libro | : Préstamo 


Coger libro 


| 
I 


Solicitar préstamo 


Verificar situación socio 
| 


Situación socio ok LU 
| 


| 
Verificar situación io 
j | 


t =: 
Situación libro ok 
| 


| Introducir préstamo 


Autorizar préstamo 


0 
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Análisis de tareas y Diálogos 


Implementación 


— Una vez modeladas las tareas y los diálogos se debe 
obtener una implementación correcta de los mismos. 


— Para ello hay que tener en cuenta varios factores: 
- Tipos de interacción: 

- Posicionamiento, valor, texto, selección, arrastre 
Principios, guías de estilo, estándares 
Gestión de entradas del usuario: 

- Petición, muestreo, evento a E 
Diseño de la presentación A 
Gestión de errores TE 

DNS ¿BS > -o- E E 
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Conclusiones 


Los prototipos son herramientas muy útiles en la fase de 
diseño para explorar y validar ideas. 


El diseño iterativo permite incorporar las consideraciones de 
los usuarios de modo que es posible tomar decisiones críticas 
en cuanto a objetivos y usabilidad en fases tempranas del 
proceso. 


Las técnicas de análisis de tareas y diálogos permiten 
representar claramente los objetivos y las interacciones con 
el sistema. 

Para una implementación correcta habrá que tener en cuenta 
en la fase de diseño las guías de estilo, estándares, 
recomendaciones, etc. 
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